<template>
  <div class="map-zoom-tool-cls row no-wrap">
    <div v-if="$slots['map-tools']" class="q-gutter-sm row q-mr-md q-mt-none items-start">
      <slot name="map-tools"></slot>
    </div>
    <div class="column q-gutter-y-sm">
      <q-slider v-model="pointScale" :label-value="formatPointLabel" :max="2" :min="0.2" :step="0.2" color="grey-6"
                dense label reverse snap switch-label-side thumb-size="20px" track-size="10px"
                @change="updatePointScale"></q-slider>
      <q-slider v-model="wheelScale" :label-value="formatWheelLabel" :max="1.8" :min="1.08" :step="0.12" color="grey-6"
                dense label reverse snap switch-label-side thumb-size="20px" track-size="10px"
                @change="updateZoomNum"></q-slider>
      <slot name="default"></slot>
    </div>
  </div>
</template>

<script setup>
import { exportAttrs } from 'src/views/MapCore/MapGlobal/utils/KonvaEvent.js'
import { mapToolsBar } from 'src/views/MapCore/MapGlobal/utils/MouseEvent.js'
import { computed, ref } from 'vue'

const wheelScale = ref(mapToolsBar.zoomNum || 1)
const pointScale = ref(mapToolsBar.pointZoom || 1)
const formatPointLabel = computed(() => `Point scaling: ${pointScale.value}`)
const formatWheelLabel = computed(() => `Wheel zoom ratio: ${wheelScale.value}`)

const updatePointScale = value => {
  const { CANVAS } = exportAttrs()
  if (!CANVAS) return (pointScale.value = mapToolsBar.pointZoom)
  mapToolsBar.setPointNum(CANVAS, value)
}
const updateZoomNum = value => mapToolsBar.setZoomNum && mapToolsBar.setZoomNum(value)
</script>